<template>
  <div class="official-position-container">
    <!-- 页面头部区域 -->
    <div class="position-header">
      <div class="header-content">
        <div class="ancient-title">仙官职位管理</div>
        <div class="header-subtitle">阴曹地府 · 职位等级与权限管理</div>
      </div>
      <div class="header-decoration">
        <div class="decoration-line"></div>
        <div class="decoration-symbol">👑</div>
        <div class="decoration-line"></div>
      </div>
    </div>

    <!-- 路由信息显示 -->
    <div class="route-info">
      <a-breadcrumb>
        <a-breadcrumb-item>
          <router-link to="/management">
            <ApartmentOutlined />
            机构管理
          </router-link>
        </a-breadcrumb-item>
        <a-breadcrumb-item>
          <CrownOutlined />
          {{ $route.meta.title }}
        </a-breadcrumb-item>
      </a-breadcrumb>
    </div>

    <!-- 核心统计卡片 -->
    <div class="stats-section">
      <a-row :gutter="[20, 20]" class="stats-grid">
        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card primary-stat">
            <div class="stat-icon">
              <UserOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">仙官总数</div>
              <div class="stat-value">{{ positionStats.totalOfficials?.toLocaleString() }}</div>
              <div class="stat-label">在册人员</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card judgment-stat">
            <div class="stat-icon">
              <RiseOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">职位等级</div>
              <div class="stat-value">{{ positionStats.totalLevels }}</div>
              <div class="stat-label">等级设置</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card pending-stat">
            <div class="stat-icon">
              <SwapOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">本月调动</div>
              <div class="stat-value">{{ positionStats.monthlyTransfers }}</div>
              <div class="stat-label">职位变更</div>
            </div>
          </div>
        </a-col>

        <a-col :xs="24" :sm="12" :xl="6">
          <div class="stat-card online-stat">
            <div class="stat-icon">
              <StarOutlined />
            </div>
            <div class="stat-content">
              <div class="stat-title">待评估</div>
              <div class="stat-value">{{ positionStats.pendingAssessments }}</div>
              <div class="stat-label">考核任务</div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 功能模块导航 -->
    <div class="modules-section">
      <h3 class="section-title">
        <CrownOutlined class="section-icon" />
        职位管理功能
      </h3>

      <a-row :gutter="[24, 24]" class="modules-grid">
        <!-- 职位等级设置 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/official-position/level-setting')">
            <div class="module-header">
              <div class="module-icon">
                <RiseOutlined />
              </div>
              <div class="module-title">职位等级设置</div>
            </div>
            <div class="module-description">管理仙官职位等级体系，设置等级权重、晋升条件和等级权限</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">当前等级：</span>
                <span class="stat-value">{{ moduleStats.levelSetting.currentLevels }}级</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">待审核：</span>
                <span class="stat-value">{{ moduleStats.levelSetting.pendingReviews }}项</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 权限分配管理 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/official-position/permission-allocation')">
            <div class="module-header">
              <div class="module-icon">
                <SafetyOutlined />
              </div>
              <div class="module-title">权限分配管理</div>
            </div>
            <div class="module-description">配置各职位的系统权限，管理功能模块访问权限和操作权限</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">权限组：</span>
                <span class="stat-value">{{ moduleStats.permissionAllocation.permissionGroups }}个</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">已分配：</span>
                <span class="stat-value">{{ moduleStats.permissionAllocation.allocated }}项</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 职位调动记录 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/official-position/transfer-record')">
            <div class="module-header">
              <div class="module-icon">
                <SwapOutlined />
              </div>
              <div class="module-title">职位调动记录</div>
            </div>
            <div class="module-description">记录和管理仙官职位调动历史，跟踪晋升、降职和调岗等变动</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">本年调动：</span>
                <span class="stat-value">{{ moduleStats.transferRecord.yearlyTransfers }}次</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">待审批：</span>
                <span class="stat-value">{{ moduleStats.transferRecord.pendingApprovals }}项</span>
              </div>
            </div>
          </div>
        </a-col>

        <!-- 考核评估系统 -->
        <a-col :xs="24" :lg="12">
          <div class="module-card" @click="navigateToModule('/management/official-position/assessment-system')">
            <div class="module-header">
              <div class="module-icon">
                <StarOutlined />
              </div>
              <div class="module-title">考核评估系统</div>
            </div>
            <div class="module-description">实施仙官绩效考核，评估工作表现和能力提升情况</div>
            <div class="module-stats">
              <div class="stat-item">
                <span class="stat-label">本期考核：</span>
                <span class="stat-value">{{ moduleStats.assessmentSystem.currentAssessments }}人</span>
              </div>
              <div class="stat-item">
                <span class="stat-label">优秀率：</span>
                <span class="stat-value">{{ moduleStats.assessmentSystem.excellentRate }}%</span>
              </div>
            </div>
          </div>
        </a-col>
      </a-row>
    </div>

    <!-- 最新职位动态 -->
    <div class="dynamics-section">
      <h3 class="section-title">
        <NotificationOutlined class="section-icon" />
        最新职位动态
      </h3>

      <div class="dynamics-list">
        <a-list
          :data-source="positionDynamics"
          :pagination="{
            pageSize: 5,
            showSizeChanger: false
          }"
        >
          <template #renderItem="{ item }">
            <a-list-item>
              <a-list-item-meta>
                <template #avatar>
                  <a-avatar :style="{ backgroundColor: item.avatarColor }" size="large">
                    <component :is="item.icon" />
                  </a-avatar>
                </template>
                <template #title>
                  <span class="dynamics-title">{{ item.title }}</span>
                  <a-tag :color="item.tagColor" size="small" style="margin-left: 8px">{{ item.type }}</a-tag>
                </template>
                <template #description>
                  <div class="dynamics-description">{{ item.description }}</div>
                  <div class="dynamics-meta">
                    <span class="dynamics-time">{{ item.time }}</span>
                    <span class="dynamics-operator">操作人：{{ item.operator }}</span>
                  </div>
                </template>
              </a-list-item-meta>
            </a-list-item>
          </template>
        </a-list>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, reactive } from 'vue'
import { useRouter } from 'vue-router'
import { HomeOutlined, ApartmentOutlined, CrownOutlined, UserOutlined, RiseOutlined, SwapOutlined, StarOutlined, SafetyOutlined, NotificationOutlined } from '@ant-design/icons-vue'

const router = useRouter()

// 职位统计信息
const positionStats = reactive({
  totalOfficials: 8888,
  totalLevels: 9,
  monthlyTransfers: 42,
  pendingAssessments: 156
})

// 模块统计信息
const moduleStats = reactive({
  levelSetting: {
    currentLevels: 9,
    pendingReviews: 3
  },
  permissionAllocation: {
    permissionGroups: 12,
    allocated: 346
  },
  transferRecord: {
    yearlyTransfers: 285,
    pendingApprovals: 8
  },
  assessmentSystem: {
    currentAssessments: 156,
    excellentRate: 89
  }
})

// 最新职位动态
const positionDynamics = ref([
  {
    id: 1,
    title: '秦广王晋升为第一殿主审',
    description: '经过严格考核，秦广王从副主审晋升为第一殿主审，负责地府入口管理工作',
    type: '晋升',
    time: '1小时前',
    operator: '玉皇大帝',
    icon: 'RiseOutlined',
    avatarColor: '#52c41a',
    tagColor: 'green'
  },
  {
    id: 2,
    title: '新增权限组"黄泉路管理"',
    description: '为应对日益增长的黄泉路管理需求，新增专门权限组',
    type: '权限配置',
    time: '3小时前',
    operator: '系统管理员',
    icon: 'SafetyOutlined',
    avatarColor: '#1890ff',
    tagColor: 'blue'
  },
  {
    id: 3,
    title: '季度考核评估启动',
    description: '第三季度仙官绩效考核正式启动，涉及全府1000+仙官',
    type: '考核评估',
    time: '6小时前',
    operator: '人事司',
    icon: 'StarOutlined',
    avatarColor: '#fa8c16',
    tagColor: 'orange'
  },
  {
    id: 4,
    title: '批量职位调动完成',
    description: '十殿阎王府间的15项职位调动申请已全部审批完成',
    type: '职位调动',
    time: '1天前',
    operator: '阎罗王',
    icon: 'SwapOutlined',
    avatarColor: '#722ed1',
    tagColor: 'purple'
  },
  {
    id: 5,
    title: '新仙官职位等级标准发布',
    description: '更新了仙官职位等级标准，新增2个高级职位等级',
    type: '等级设置',
    time: '2天前',
    operator: '太上老君',
    icon: 'RiseOutlined',
    avatarColor: '#eb2f96',
    tagColor: 'magenta'
  }
])

// 导航到指定模块
const navigateToModule = (path) => {
  router.push(path)
}
</script>

<style lang="scss" scoped>
.official-position-container {
  padding: 24px;

  // 页面头部
  .position-header {
    text-align: center;
    margin-bottom: 32px;

    .header-content {
      .ancient-title {
        font-size: 32px;
        font-weight: bold;
        color: $secondary-color;
        margin-bottom: 8px;
        text-shadow: 0 0 20px rgba(212, 153, 10, 0.3);
      }

      .header-subtitle {
        font-size: 16px;
        color: $text-secondary;
        letter-spacing: 2px;
      }
    }

    .header-decoration {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-top: 24px;
      gap: 16px;

      .decoration-line {
        width: 80px;
        height: 1px;
        background: linear-gradient(90deg, transparent, $secondary-color, transparent);
      }

      .decoration-symbol {
        font-size: 20px;
        color: $secondary-color;
        font-weight: bold;
      }
    }
  }

  // 路由信息
  .route-info {
    margin-bottom: 24px;
    padding: 12px 16px;
    border-radius: 8px;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(212, 153, 10, 0.2);
  }

  // 统计卡片区域
  .stats-section {
    margin-bottom: 32px;

    .stat-card {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 16px;

      .stat-icon {
        width: 56px;
        height: 56px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        color: white;
      }

      .stat-content {
        flex: 1;

        .stat-title {
          font-size: 14px;
          color: $text-secondary;
          margin-bottom: 4px;
        }

        .stat-value {
          font-size: 28px;
          font-weight: bold;
          color: $primary-color;
          margin-bottom: 4px;
        }

        .stat-label {
          font-size: 12px;
          color: $text-secondary;
        }
      }

      &.primary-stat .stat-icon {
        background: linear-gradient(135deg, #1890ff, #40a9ff);
      }

      &.judgment-stat .stat-icon {
        background: linear-gradient(135deg, #52c41a, #73d13d);
      }

      &.pending-stat .stat-icon {
        background: linear-gradient(135deg, #fa8c16, #ffa940);
      }

      &.online-stat .stat-icon {
        background: linear-gradient(135deg, #722ed1, #9254de);
      }
    }
  }

  // 模块导航区域
  .modules-section {
    margin-bottom: 32px;

    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .module-card {
      border-radius: 16px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);
      transition: all 0.3s ease;
      cursor: pointer;
      height: 100%;

      .module-header {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 16px;

        .module-icon {
          width: 48px;
          height: 48px;
          border-radius: 50%;
          background: linear-gradient(135deg, $secondary-color, #f0c674);
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 20px;
          color: white;
        }

        .module-title {
          font-size: 18px;
          font-weight: bold;
          color: $primary-color;
        }
      }

      .module-description {
        color: $text-secondary;
        line-height: 1.6;
        margin-bottom: 20px;
      }

      .module-stats {
        padding-top: 16px;
        border-top: 1px solid rgba(212, 153, 10, 0.2);

        .stat-item {
          display: flex;
          justify-content: space-between;
          margin-bottom: 8px;

          .stat-label {
            color: $text-secondary;
            font-size: 14px;
          }

          .stat-value {
            color: $secondary-color;
            font-weight: bold;
            font-size: 14px;
          }
        }
      }
    }
  }

  // 动态列表区域
  .dynamics-section {
    .section-title {
      font-size: 20px;
      font-weight: bold;
      color: $primary-color;
      margin-bottom: 24px;
      display: flex;
      align-items: center;
      gap: 8px;

      .section-icon {
        color: $secondary-color;
      }
    }

    .dynamics-list {
      border-radius: 12px;
      padding: 24px;
      box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
      border: 1px solid rgba(212, 153, 10, 0.2);

      .dynamics-title {
        font-weight: bold;
        color: $primary-color;
        font-size: 16px;
      }

      .dynamics-description {
        color: $text-primary;
        line-height: 1.5;
        margin-bottom: 8px;
      }

      .dynamics-meta {
        display: flex;
        gap: 16px;

        .dynamics-time {
          color: $text-secondary;
          font-size: 14px;
        }

        .dynamics-operator {
          color: $text-secondary;
          font-size: 14px;
        }
      }
    }
  }
}
</style>
